<!DOCTYPE html>
<html>
<head>
  <title>CardKit</title>
  <link rel="icon" type="image/png" href="./favicon.png" />
</head>
<body>

<div id="ui"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<script type="text/javascript" src="./dist/cardkit.js"></script>
<script type="text/javascript" src="./dist/dom.js"></script>
<script type="text/javascript">
  // Setup default configuration
  var configuration = {
    fonts: {
      'Open Sans': {
        src: 'data:woff;base64,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',
        format: 'woff',
      }
    },
    card: {
      width: 1000,
      height: 462,
      fill: '#4da5bd',
      editable: {
        width: true,
        height: true,
        fill: true
      }
    },
    layers: {
      image: {
        type: 'image',
        name: 'Logo',
        x: 400,
        draggable: true,
        width: 200,
        get height() {
          return this.width;
        },
        editable: {
          src: true,
          width: {
            max: 1000
          }
        },
        src: ''
      },
      imageMask: {
        name: 'Rectangle',
        type: 'rectangle',
        x: 0,
        y: 0,
        width: 1000,
        fill: '#333333',
        editable: {
          fill: {
            options: [
              '#999999',
              '#333333',
              '#00ccaa',
              '#99aa00',
              '#22bbcc',
              '#12ff00',
              '#ddcc00',
              '#ff00ee'
            ]
          },
          width: {
            step: 20,
            max: 1000
          }
        }
      },
      headline: {
        type: 'text',
        name: 'Headline',
        x: 500,
        y: 43,
        fontSize: 40,
        textAnchor: 'middle',
        get lineHeight() {
          return this.fontSize * 1.2;
        },
        fill: '#FFF',
        text: 'CardKit is a powerful, configurable image editor\nthat runs in your browser and on servers',
        fontFamily: 'Open Sans',
        editable: {
          text: {
            /*options: [
              'First option',
              'Second option'
            ]*/
          },
          fontSize: {
            min: 10,
            max: 50,
            step: 10
          }
        }
      },
      text: {
        type: 'text',
        name: 'Subtitle',
        x: 500,
        y: {
          attach: 'headline',
          offset: 20
        },
        textAnchor: 'middle',
        fontSize: 20,
        get lineHeight() {
          return this.fontSize * 1.2;
        },
        fill: '#FFF',
        fontFamily: 'Arial',
        editable: {
          text: true,
          fontSize: true
        },
        text: 'Created by The Times of London\nAvailable on GitHub at github.com/times/cardkit'
      },
      text2: {
        type: 'text',
        name: 'Twitter',
        x: 500,
        y: {
          attach: 'text',
          offset: 5
        },
        textAnchor: 'middle',
        fontSize: 14,
        get lineHeight() {
          return this.fontSize * 1.2;
        },
        draggable: true,
        fill: '#FFF',
        fontFamily: 'Helvetica',
        editable: {
          text: true
        },
        text: '@CardKit on Twitter'
      }
    }
  };

  var themes = {
    'Blue': {
      card: {
        fill: '#4da5bd'
      },
      layers: {
        text2: {
          fill: '#4da5bd'
        }
      }
    },
    'Red': {
      card: {
        fill: 'red'
      },
      layers: {
        text2: {
          fill: 'red'
        }
      }
    },
    'Orange': {
      card: {
        fill: 'orange'
      },
      layers: {
        text2: {
          fill: 'orange'
        }
      }
    },
  };

  var layouts = {
    'Facebook': {
      card: {
        width: 1000,
        height: 462,
      },
      layers: {
        headline: {
          y: 43
        },
        image: {
          y: 380
        },
        imageMask: {
          height: 350
        }
      }
    },
    'Twitter': {
      card: {
        width: 1000,
        height: 560,
      },
      layers: {
        headline: {
          y: 143
        },
        image: {
          y: 480
        },
        imageMask: {
          height: 450
        }
      }
    },
    'Instagram': {
      card: {
        width: 1000,
        height: 1000,
      },
      layers: {
        headline: {
          y: 343
        },
        image: {
          y: 910
        },
        imageMask: {
          height: 880
        }
      }
    }
  }
  
  // Instantiate CardKit
  var cardkit = new CardKit(configuration, {
    themes: themes,
    layouts: layouts
  });

  var renderer = new CardKitDOM(cardkit);

  // Render the UI
  renderer.renderUI('ui');

</script>
</body>
</html>